<template>
  <div class="eo">
    <!-- 头部导航 -->
    <top-nav title="个人资料" tn-name=""></top-nav>
    <!-- 个人资料编辑面板 -->
    <div class="eo_con">
      <van-form validate-first @submit="submit">
        <!-- 用户名，只读 -->
        <van-field
          v-model="username"
          readonly
          colon
          label="用户名"
          name="username"
        />
        <!-- 邮箱 -->
        <van-field
          @input="changeValue"
          v-model="email"
          clearable
          colon
          label="邮箱"
          type="email"
          name="email"
          :rules="[{ pattern, message: '请输入正确的邮箱' }]"
        />
        <!-- 手机号 -->
        <van-field
        @input="changeValue"
          v-model="phone"
          clearable
          colon
          label="手机号"
          type="tel"
          name="phone"
          :rules="[{ validator, message: '请输入正确的手机号' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">
            确认修改
          </van-button>
        </div>
      </van-form>
    </div>

  </div>
</template>

<script>
  import { Toast } from 'vant';
  import TopNav from '@/components/TopNav.vue';

  export default {
    data() {
      return {
        type:false,
        username: '',
        email: '',
        phone: '',
        pattern:/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
      };
    },
    components:{
      TopNav,
    },
    created() {
      this.username = this.$store.state.us.username;
      this.email = this.$store.state.us.email;
      this.phone = this.$store.state.us.phone;
    },
    methods: {
      // 手机号正则校验
        validator(val) {
            return /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/.test(val);
        },
        changeValue(){
          this.type=true;
        },
      submit(){
        if(this.type){
          this.axios.get("/rlg/user/gmsg?phone="+this.phone+"&email="+this.email).then((response) =>{
            if(response.data.code == 200){
              //更新状态管理中用户信息
              this.$store.commit('a',response.data.data);
              Toast.success('修改成功');
            }else{
              Toast.fail(response.data.msg);
            }
          })
        }else{
          Toast('没有任何修改=-=');
        }
      },
    },
  };
</script>

<style>
  .eo_con{
    width: 85%;
    background-color: white;
    margin: auto;
    border-radius: 20px;
    padding: 15px;
    margin-top: 10px;
  }
  .vc{
    border-radius: 20px;
  }
</style>
